<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap表格</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    body{
        margin: 20px;
    }
</style>
<body>
    <main>
        <table class="table table-bordered table-hover">
            <caption>白色底色的表格</caption>
            <thead class="thead-dark">
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>籍贯</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <th>张三</th>
                    <th>男</th>
                    <th>19</th>
                    <th>汉族</th>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <th>2</th>
                    <th>李四</th>
                    <th>女</th>
                    <th>22</th>
                    <th>汉族</th>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <th>3</th>
                    <th>王五</th>
                    <th>男</th>
                    <th>21</th>
                    <th>满族</th>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <th>4</th>
                    <th>赵六</th>
                    <th>男</th>
                    <th>32</th>
                    <th>傣族</th>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <th>5</th>
                    <th>田七</th>
                    <th>男</th>
                    <th>11</th>
                    <th>汉族</th>
                </tr>
            </tbody>
        </table>
        <table class="table table-dark table-bordered">
            <caption>黑色底色的表格</caption>
            <thead class="thead-light">
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>籍贯</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <th>张三</th>
                    <th>男</th>
                    <th>19</th>
                    <th>汉族</th>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <th>2</th>
                    <th>李四</th>
                    <th>女</th>
                    <th>22</th>
                    <th>汉族</th>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <th>3</th>
                    <th>王五</th>
                    <th>男</th>
                    <th>21</th>
                    <th>满族</th>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <th>4</th>
                    <th>赵六</th>
                    <th>男</th>
                    <th>32</th>
                    <th>傣族</th>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <th>5</th>
                    <th>田七</th>
                    <th>男</th>
                    <th>11</th>
                    <th>汉族</th>
                </tr>
            </tbody>
        </table>
    </main>

    <script src="../js/bootstrap.js"></script>
</body>
</html>